<template>
  <div class="">
    <ul>
      <h1>已完成{{ $store.getters.num }}</h1>
      <li
        v-for="(item, index) in $store.state.list"
        :key="index"
        v-show="item.status == true"
      >
        <input type="checkbox" v-model="item.status" @change="change" />
        <!-- <input type="checkbox" @change="change(index)" :checked="item.status" /> -->

        <input
          type="text"
          v-model="item.title"
          v-if="flag == index"
          @blur="flag = -1"
          @change="change"
        />
        <span v-else @dblclick="flag = index">{{ item.title }}</span>
      </li>
    </ul>
    <ul>
      <h1>未完成{{ $store.getters.num1 }}</h1>
      <li
        v-for="(item, index) in $store.state.list"
        :key="index"
        v-show="item.status == false"
      >
        <input type="checkbox" v-model="item.status" @change="change" />
        <!-- <input type="checkbox" @change="change(index)" :checked="item.status" /> -->

        <input
          type="text"
          v-model="item.title"
          v-if="flag == index"
          @blur="flag = -1"
          @change="change"
        />
        <span v-else @dblclick="flag = index">{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: -1,
    };
  },
  mounted() {},
  methods: {
    change(index) {
      //   this.$store.commit("change", index);
      this.$store.commit("change");
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
